<template>
  <div>
    <h1>录音</h1>

    <p>
      <a
        href="https://developers.weixin.qq.com/miniprogram/dev/api/media/recorder/wx.getRecorderManager.html"
        >wx.getRecorderManager 文档</a
      >
    </p>

    <div> {{ minuteFill }}:{{ secondFill }} </div>
    <button @click="start">开始录音</button>
    <button @click="stop">停止录音</button>
  </div>
</template>

<script lang="ts" setup>
import { fillDouble } from '@/utils/datetime/format'
import Timer from '@/utils/timer/Timer'
import { computed, ref } from 'vue'
import useRecorder from './useRecorder'
const { recorderStart, recorderStop } = useRecorder((res) => {
  console.log('🚀 -- const{recorderStart,recorderStop}=useRecorder -- res', res)
})
const second = ref(0)
const minute = ref(0)

const secondFill = computed(() => {
  return fillDouble(second.value)
})

const minuteFill = computed(() => {
  return fillDouble(minute.value)
})

const timer = new Timer({
  fn() {
    second.value += 1
  },
  time: 1000,
})
function start() {
  timer.start()
  recorderStart()
}
function stop() {
  timer.stop()
  second.value = minute.value = 0
  recorderStop()
}
</script>
